<template>
  <div>
    <div class="header">
      <p>出行小提示</p>
    </div>
    <van-tabs :v-model:active="active">
      <div v-for="item in shenghuoList" :key="item.date" class="aa">
        <van-tab :title="item.date.slice(5)">
          <div>空调：{{ item.ac.brief }}{{ item.ac.details }}</div>
          <div>空气质量：{{ item.air_pollution.brief }} {{ item.air_pollution.details }}</div>
          <div>晾晒：{{ item.airing.brief }}{{ item.airing.details }}</div>
          <div>过敏：{{ item.allergy.brief }}{{ item.allergy.details }}</div>
          <div>啤酒：{{ item.beer.brief }}{{ item.beer.details }}</div>
          <div>划船：{{ item.boating.brief }}{{ item.boating.details }}</div>
          <div>洗车：{{ item.car_washing.brief }}{{ item.car_washing.details }}</div>
          <div>舒适度{{ item.comfort.brief }}{{ item.comfort.details }}</div>
          <div>穿衣：{{ item.dressing.brief }}{{ item.dressing.details }}</div>
          <div>流行性感冒：{{ item.flu.brief }}{{ item.flu.details }}</div>
          <div>垂钓：{{ item.fishing.brief }}{{ item.fishing.details }}</div>
          <div>外出：{{ item.sport.brief }}{{ item.sport.details }}</div>
          <div>带伞：{{ item.umbrella.brief }}{{ item.umbrella.details }}</div>
          <div>防晒：{{ item.sunscreen.brief }}{{ item.sunscreen.details }}</div>
          <div>uv：{{ item.uv.brief }}{{ item.uv.details }}</div>
          <div></div>
        </van-tab>
      </div>
    </van-tabs>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { shenghuoQuery } from '../../service/cityService'

const active = ref(0)
let id = ref('')
let name = ref('')
let shenghuoList: any = ref([])
let aa = localStorage.getItem('city')
if (aa?.length) {
  id.value = JSON.parse(aa).id
  name.value = JSON.parse(aa).name
}

const tiShi = async () => {
  let { data } = await shenghuoQuery({
    key: 'S_kv1Ro8FrmQ4UeD9',
    location: name.value,
    language: 'zh-Hans',
    days: 5
  })
  shenghuoList.value = data.results[0].suggestion
  console.log(shenghuoList.value)
}
onMounted(() => {
  tiShi()
})
</script>

<style scoped lang="scss">
.header {
  height: 40px;
  background: #fff;
  line-height: 40px;
  font-size: 16px;
  text-align: center;
}
.aa {
  background: #fff;
  font-size: 12px;
  div {
    margin-top: 10px;
    line-height: 20px;
    padding: 10px;
    border-bottom: 1px solid rgba($color: #000000, $alpha: 0.2);
  }
}
</style>
